<template>
	<view class="container">

		<view class="">
			<u-subsection fontSize="14px" :list="list" :current="curNow" @change="sectionChange" bgColor="#3c9cff">
			</u-subsection>
		</view>

		<view>
			<u--form labelPosition="top" :model="userInfo" :rules="rules" ref="uForm">
				<u-form-item label="业务开发" prop="businessDevelop" borderBottom labelWidth="200px">
					<u--input v-model="userInfo.businessDevelop" border="none"></u--input>
				</u-form-item>

				<u-form-item required label="老板姓名" prop="nickName" borderBottom labelWidth="200px">
					<u--input v-model="userInfo.nickName" border="none"></u--input>
				</u-form-item>


				<u-form-item required label="老板手机号" prop="userName" borderBottom labelWidth="200px">
					<u--input v-model="userInfo.userName" border="none"></u--input>
				</u-form-item>


				<u-form-item required label="商户名称" prop="merchantName" borderBottom labelWidth="200px">
					<u--input v-model="userInfo.merchantName" border="none"></u--input>
				</u-form-item>

				<u-form-item required label="地理位置" prop="addressPrefix" borderBottom labelWidth="200px" @tap="open">
					<u--input v-model="userInfo.addressPrefix" border="none"></u--input>
				</u-form-item>
				<!-- https://ext.dcloud.net.cn/plugin?id=7065 -->
				<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
					@confirm="confirm" @cancel="cancel" :visible="visible2" />

				<u-form-item required prop="addressInfo" borderBottom labelWidth="200px">
					<u--input v-model="userInfo.addressInfo" border="none"></u--input>
				</u-form-item>

				<u-form-item required label="直通车" prop="directTrain" borderBottom labelWidth="200px">
					<u-radio-group v-model="directTrainValue" placement="row">
						<u-radio :customStyle="{margin: '8px'}" v-for="(item, index) in directTrainRadioValue"
							:key="index" :label="item.name" :name="item.name" @change="radioChange(index)">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item required label="地址来源" prop="addressSource" borderBottom labelWidth="200px">
					<u-radio-group v-model="addressSourceValue" placement="row">
						<u-radio :customStyle="{margin: '8px'}" v-for="(item, index) in addressSourceRadioValue"
							:key="index" :label="item.name" :name="item.name" @change="addressSourceChange(index)">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-button type="primary" @click="submit">提交</u-button>
			</u--form>
		</view>
	</view>

	</view>
</template>

<script>
	import {
		addMerchant
	} from '@/api/system/user.js'
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'

	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				list: ['添加商户', '查找商户'],
				curNow: 0,
				visible2: false,
				maskCloseAble: true,
				defaultValue: '',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				userInfo: {
					businessDevelop: '',
					userName: '',
					nickName: "",
					merchantName: "",
					addressPrefix: '',
					addressInfo: '',
					addressFull: '',
					directTrain: '0',
					addressSource: '0',
					userType: 33,
				},

				directTrainValue: '正常过审',

				directTrainRadioValue: [{
					name: '正常过审',
					disabled: true
				}, {
					name: '直通车',
					disabled: false
				}],

				addressSourceRadioValue: [{
					name: '美团',
					disabled: true
				}, {
					name: '携程',
					disabled: false
				}, {
					name: '飞猪',
					disabled: false
				}],
				addressSourceValue: '美团',
				rules: {
					'nickName': [{
						type: 'string',
						required: true,
						message: '老板姓名',
						max: 8,
						trigger: ['blur', 'change']
					}],
					'userName': [{
						type: 'number',
						required: true,
						// min: 11,
						// max: 11,
						message: '请输入11位手机号',
						trigger: ['blur', 'change']
					}],

					'merchantName': [{
						type: 'string',
						required: true,
						message: '商户名称',
						max: 64,
						trigger: ['blur', 'change']
					}],

					'addressPrefix': [{
						type: 'string',
						required: true,
						message: '省 市 区',
						max: 64,
						trigger: ['blur', 'change']
					}],

					'addressInfo': [{
						type: 'string',
						required: true,
						message: '详细地址',
						max: 128,
						trigger: ['blur', 'change']
					}],
				},
			};
		},
		methods: {
			open() {
				this.visible2 = true
			},
			confirm(val) {
				this.userInfo.addressPrefix = val.name;
				this.visible2 = false
			},
			cancel() {
				this.visible2 = false
			},
			sectionChange(index) {
				let oldCurNow = this.curNow;
				this.curNow = index;
				if (index === 1 && oldCurNow === 0) {
					uni.redirectTo({
						url: '/pages/merchant/merchantsearch'
					})
				}
			},
			async submit() {
				try {
					await this.$refs.uForm.validate();
					uni.$u.toast('校验通过');
					console.log(JSON.stringify(this.userInfo));
					this.userInfo.addressFull = this.userInfo.addressPrefix + this.userInfo.addressInfo;
					const res = await addMerchant(this.userInfo);
					console.log(JSON.stringify(res));
					uni.$u.toast(res.msg);
				} catch (errors) {
					uni.$u.toast('校验失败' + JSON.stringify(errors));
				}
			},
			radioChange(n) {
				console.log('radioChange', n);
				this.userInfo.directTrain = n;
			},
			addressSourceChange(n) {
				console.log('addressSourceChange', n);
				this.userInfo.addressSource = n;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 12px;
		display: flex;
		flex-direction: column;
		margin: auto;
		background: linear-gradient(180deg, #f0f0f0 0%, #d0eaff 100%);
		height: 100vh;
	}
	
	
</style>